<template>
  <div class="app-container">
    <leaseContract :state="state" v-model="form.replacementCar" />
    <carReplacementService :state="state" v-model="form.replacementCar" />
    <vehicleInformationZD :state="state" v-model="form.replacementCar" />
    <StorageOutInventoryInfoTche :state="state" v-model="form.carOutStorage" />
    <informationForCars :state="state" v-model="form.carInStorage" ref="informationForCars" />
  </div>
</template>

<script>
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import StorageOutInventoryInfoTche from '@/views/carInventory/components/StorageOutInventoryInfoTche.vue'
import informationForCars from '@/views/carInventory/components/informationForCars.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
export default {
  components: { leaseContract, carReplacementService, vehicleInformationZD, StorageOutInventoryInfoTche, informationForCars },
  name: 'detailTcheFlow',
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return { form: this.value }
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
